import { Component, OnInit } from '@angular/core';
import {Path} from "../../../../portal/admin/admin-breadcrumb/breadcrumb";
import {PageSubject} from "../../../../util/page-subject";
import {MsgResult} from "../../../../models/msg-result";
import {ReportWeeklyService} from "./report-weekly.service";
import {ResponseUtil} from "../../../../util/response-util";
import {OneDialogService} from "../../../../widgets/one-dialog/one-dialog.service";
import {MsgConstants} from "../../../../constants/constants";
import {TableUtil} from "../../../../util/table-util";

declare var $;
declare var moment;
@Component({
  selector: 'app-report-weekly',
  templateUrl: './report-weekly.component.html',
  styleUrls: ['./report-weekly.component.css']
})
export class ReportWeeklyComponent implements OnInit {
  tableDataObj;table;
  constructor(
    private pageSubject : PageSubject,
    private ReportWeeklyService : ReportWeeklyService,
    private responseUtil :ResponseUtil,
    private tableUtil:TableUtil,
    private dialogService: OneDialogService,
  ) { }

  ngOnInit() {
    this.pushPage();
    this.siteButtonData();

  }

  //面包屑导航
  pushPage() {
    let path = new Path("分析报告", "");
    this.pageSubject.pushPage("空气质量周报", "", path);
  }

  //站点按钮数据
  siteButtonData(){
    this.ReportWeeklyService.getUserSiteData().subscribe(
      result => this.responseUtil.success(result,this.siteButtonDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private siteButtonDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      this.siteButtonDataDataTree(result.data);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }

  //站点按钮
  siteButtonDataDataTree(data){
    let siteHtml = "";
    let localSite = [
      {"name":"nationalSite","className":"national","type":"national","chinese":"国控站"},
      {"name":"provinceSite","className":"province","type":"province","chinese":"省控站"},
      {"name":"smallAirSite","className":"small","type":"smallAir","chinese":"微型站"}
    ];
    $.each(localSite,function (j,siteList) {
      $.each(data,function (i,list) {
        if(list==siteList.name){
          siteHtml+='<div class="btn btn-default '+siteList.className+'" id="'+siteList.name+'" data-type="national">'+siteList.chinese+'</div>';
        }
      });
    });
    if(siteHtml){
      $(".user_site_button").html(siteHtml);
      $(".user_site_button").find(".btn:first").addClass("active");
      this.initTime();
      this.tableDataObj = {"year":moment().format("YYYY"),"weekNum":moment().subtract(1,"w").format("w"),"pointType":$(".user_site_button").find(".btn:first").attr("id")}
      this.tableContentData(this.tableDataObj);
    }else{
      $(".one-content").html("暂无数据");
    }

  };


  //表格数据
  tableContentData(obj){
    this.ReportWeeklyService.getReportWeeklyData(obj).subscribe(
      result => this.responseUtil.success(result,this.tableContentDataResult),
      message => this.responseUtil.error(message)
    );
  }
  private tableContentDataResult = (result: MsgResult) =>{
    if (result && result.code == MsgConstants.MSG_CODE_OK) {
      $(".one-content h2>span:nth-child(1)").html(result.data.regionName);
      this.tableContentDataTree(result.data.dataList);
    }
    if (result && result.code != MsgConstants.MSG_CODE_OK) {
      this.dialogService.info(result.message);
    }
  }
  private tableContentDataTree(data){
    console.log("表格数据加载成功");
    console.log(data);
    $(".one-data-loadState").hide();
    this.tableContent(data);

  }

//表格
  tableContent(datas){
      $(".one-table-area").html('<table class="table table-striped" id="airQualityWeekTable"></table>');
    this.table=this.tableUtil.load("airQualityWeekTable",{
        columns: [
          [{
            field: 'index',
            title: '排名',
            rowspan: 2,
            valign:"middle",
            width:35
          }, {
            field: 'siteName',
            title: '站点名称',
            rowspan: 2,
            valign:"middle",
            align:"left",
            halign:"center",
            width:90
          }, {
            field: 'compositeValue',
            title: '综合指数',
            rowspan: 2,
            valign:"middle",
            width:60,
            align:"right",
            halign:"center"
          }, {
            field: 'aqi',
            title: 'AQI',
            rowspan: 2,
            valign:"middle",
            width:50,
            align:"right",
            halign:"center"
          }, {
            field: ' ',
            title: 'PM10',
            colspan: 2,
            width:100
          }, {
            field: ' ',
            title: 'PM2.5',
            colspan: 2,
            width:100
          }, {
            field: ' ',
            title: 'SO<sub>2</sub>',
            colspan: 2,
            width:100
          }, {
            field: ' ',
            title: 'NO<sub>2</sub>',
            colspan: 2,
            width:100
          }, {
            field: ' ',
            title: 'CO',
            colspan: 2,
            width:100
          }, {
            field: ' ',
            title: 'O<sub>3</sub>',
            colspan: 2,
            width:100
          }],[
            {
              field: 'pm10',
              title: '浓度',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'pm10IAQI',
              title: '指数',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'pm25',
              title: '浓度',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'pm25IAQI',
              title: '指数',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'so2',
              title: '浓度',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'so2IAQI',
              title: '指数',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'no2',
              title: '浓度',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'no2IAQI',
              title: '指数',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'co',
              title: '浓度',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'coIAQI',
              title: '指数',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'o3',
              title: '浓度',
              width:50,
              align:"right",
              halign:"center"
            },{
              field: 'o3IAQI',
              title: '指数',
              width:50,
              align:"right",
              halign:"center"
            }
          ]
        ],
        data:datas,
        striped :true,
        undefinedText : " ",
        height:$(window.innerHeight)[0]-250
      });
    }

  //初始化
  initTime(){
    let yearNum = moment().format("YYYY");
    let weekNum = moment().subtract(1,"w").format("w");
    $('#weekYear').val(yearNum).attr("max",yearNum);
    $('#weekDay').val(weekNum).attr("max",weekNum);
    $(".one-content h2>span:nth-child(2)").html(yearNum);
    $(".one-content h2>span:nth-child(3)").html(weekNum);
    $(".national").click(function(){
      $(this).addClass("active").siblings(".active").removeClass("active");
    });
    $(".province").click(function(){
      $(this).addClass("active").siblings(".active").removeClass("active");
    });
    $(".small").click(function(){
      $(this).addClass("active").siblings(".active").removeClass("active");
    });

    //周的最大值
    $(function(){
      $('#weekYear').bind('input porpertychange',function(){
        if($('#weekYear').val()==yearNum){
          $('#weekDay').val(weekNum)
        }
        let weekMax = $('#weekYear').val()==yearNum?weekNum:53;
        $('#weekDay').attr("max",weekMax);
      });
    });


    //添加导出按钮
    $(function(){
      $(".one-btn-data-type").append("<div class='pull-right'><button class='btn btn-success export'>导出为Excel</button></div>");
      $(".export").click(function(){
        var pointType=$(".site").find(".active").attr("id");
        var year = $("#weekYear").val();
        var weekNum = $("#weekDay").val();
        var objString = "year="+year+"&weekNum="+weekNum+"&pointType="+pointType;
        let baseUrl = location.protocol + "//" + location.host + "/";
        console.log(baseUrl+"api/exportExcel/airQualityDayReportExportExcel?format=json&"+objString);
        window.location.href = baseUrl+"api/exportExcel/airQualityWeekReportExcelExport?format=json&"+objString;
      })
    });

    //点击查询
    $(".search").click(function(){
      $(".one-table-area").html('<table class="table table-striped" id="airQualityWeekTable"></table>');
      $(".one-data-loadState").show();
      let pointType=$(".site").find(".active").attr("id");
      let year = $("#weekYear").val();
      let weekNum = $("#weekDay").val();
      $(".one-content h2>span:nth-child(2)").html(year);
      $(".one-content h2>span:nth-child(3)").html(weekNum);
      let changeData = {"year":year,"weekNum":weekNum,"pointType":pointType};
      this.tableContentData(changeData);
    }.bind(this));
    $(".one-data-loadState").show();
  }




}
